import React, { Component,Fragment } from 'react';
import {Card,Spin,Icon,Alert} from 'antd'
import './ui.less'
export default class Loadings extends Component {
    render(){
        const loading =<Icon style={{fontSize:24}} type="loading"></Icon> 
        return (
            <Fragment>
                <Card title="spin用法" className="card-wrapper">
                    <Spin size="small" />
                    <Spin size="default" style={{margin:'0 30px'}}/>
                    <Spin size="large"/>
                    <Spin indicator={loading} style={{marginLeft:30}}/>
                </Card>
                <Card title="内容遮罩" className="card-wrapper">
                    <Alert 
                        message="React"
                        description="欢迎来到react高级教程"
                        type="info"
                    />
                    
                    <Spin>
                        <Alert
                            style={{margin:'30px 0'}} 
                            message="React"
                            description="欢迎来到react高级教程"
                            type="info"
                        />
                    </Spin>

                    <Spin tip="加载中">
                        <Alert
                            style={{margin:'30px 0'}} 
                            message="React"
                            description="欢迎来到react高级教程"
                            type="info"
                        />
                    </Spin>

                    <Spin indicator={loading}>
                        <Alert
                            style={{margin:'30px 0'}} 
                            message="React"
                            description="欢迎来到react高级教程"
                            type="info"
                        />
                    </Spin>
                </Card>
            </Fragment>
        )
    }
}